<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title></title>
        
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
            }
            
            #main {
                /*
                display: -webkit-box;
                */
            }
            
            .circle {
                left: 0px;
                top: 0px;
                width:50px;
                height:50px;
                border-radius: 100px;
                -webkit-box-shadow: 2px 2px 8px black;
                -moz-box-shadow: 2px 2px 8px black;
                background: hsl(180, 50%, 50%);
                float: left;
                margin: 10px;
            }
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            TM.loadScript("dom", "dom");
            
            TM.main(function(){
                var $ = TM.DOM.Element;
                
                var main  = $("#main");
                
                for (var i=0; i<360; ++i) {
                    var circle = main.$create("div");
                    circle.element.classList.add("circle");
                    circle.backgroundColor = "hsl({0}, 50%, 50%)".format(i);
                    
                    circle.event.add("mouseover", function(){
                        this.style.set("zIndex", 256);
                        this.trans
                            .setDuration("100ms")
                            .setTimingFunction("ease")
                            .setProp({
                                "transform": "scale(2.0)"
                            });
                    });
                    
                    circle.event.add("mouseout", function(){
                        this.style.set("zIndex", 0);
                        this.trans
                            .setDuration("2s")
                            .setTimingFunction("ease")
                            .setProp({
                                "transform": "scale(1.0)"
                            });
                    });
                }
                
            });
        </script>
        
    </head>
    
    <body>
        <div id="main"></div>
    </body>
</html>





















